import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
          appBar: AppBar(
            title: const Text('垂直居中'),
          ),
          body: const HomePage()),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    // return Row(
    //   mainAxisAlignment: MainAxisAlignment.center,
    //   children: [
    //     IconContainer(Icons.home, color: Colors.red),
    //     IconContainer(Icons.search, color: Colors.blue),
    //     IconContainer(Icons.cable, color: Colors.green),
    //   ],
    // );
    return Container(
      padding: const EdgeInsets.all(10),
      width: double.infinity, //double.infinity无穷大
      height: double.infinity,
      color: Colors.greenAccent,
      child: Column( //外部没有Container的话，行是自适应的
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, //水平
        crossAxisAlignment: CrossAxisAlignment.start, //垂直
        children: [
          IconContainer(Icons.home, color: Colors.red),
          IconContainer(Icons.search, color: Colors.blue),
          IconContainer(Icons.cable, color: Colors.green),
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  Color color;
  IconData icon;

  IconContainer(this.icon, {Key? key, required this.color}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 120,
      height: 120,
      color: color,
      child: Icon(
        icon,
        color: Colors.white,
        size: 28,
      ),
    );
  }
}
